<script setup lang="ts">
/* eslint-disable vue/prop-name-casing */
import type { Image } from '~/types'
import type { ProductParam } from '~/types/product'

const props = withDefaults(defineProps<{
  name: string
  name_en: string
  desc: string
  desc_en: string
  params: string
  params_en: string
  size?: 'mini' | 'medium'
  build_type?: any
  img_list: string
}>(), {
  size: 'medium',
})

const { locale, isCN } = useLocale()

const { resolveImgURL } = useGlobalStore()

const imgList = computed(() => safeJSONParse(props.img_list, []) as Image[])
const paramsList = computed(() => safeJSONParse(isCN.value ? props.params : props.params_en) as ProductParam[])
</script>

<template>
  <div
    class="group flex flex-col items-center"
    :class="[{ mini: size === 'mini' }, size === 'mini' ? ['flex-row items-start bg-[#F5F5F5] p-[40px] max-md:p-0 max-md:flex-col'] : []]"
  >
    <div
      class="img mb-[32px] h-[338px] w-auto flex-shrink-0 group-[.mini]:mr-[32px] group-[.mini]:h-[210px] group-[.mini]:w-[325px]"
    >
      <img class="h-full w-full" :src="resolveImgURL(imgList?.[0]?.url)" :title=" isCN ? name : name_en " :alt=" isCN ? name : name_en " />
    </div>
    <div class="desc relative bg-[#fafafa] p-[20px] group-[.mini]:p-0">
      <div v-if="build_type" class="scene absolute right-[20px] top-[20px]" text="[16px] [var(--color-text-primary)]">
        {{ get(build_type, 'name', locale) }}
      </div>
      <h5 m="b-[16px]" text="[20px] max-md:[16px]" font="">
        {{ isCN ? name : name_en }}
      </h5>
      <p m="b-[16px]" text="[14px] max-md:[13px]">
        {{ isCN ? desc : desc_en }}
      </p>
      <div class="params px-[12px] py-[2px]">
        <ul v-for="param in paramsList" :key="param.key" class="row">
          <li class="p-[4px] leading-[32px] opacity-80" text="[var(--color-text-secondary)] [14px]">
            {{ param.paramKey }}
          </li>
          <li class="p-[4px] leading-[32px]" text="[var(--color-text-secondary)] [14px]">
            {{ param.paramValue }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<style scoped lang="postcss">
.params {
  @apply bg-[#fff];
  .row {
    @apply flex;
  }
  .row > li {
    @apply flex-1  max-md:text-[13px];
  }
  .row + .row {
    border-top: 1px solid #1f1f1f0f;
  }
}

.mini {
  .img {
    @apply max-md:mr-0 max-md:mb-[12px];
  }
  .desc {
    @apply max-md:px-[16px] max-md:pb-[12px] bg-[#F5F5F5];
    .scene {
      @apply max-md:text-[12px] top-0 max-md:top-[16px] right-0 max-md:right-[16px];
    }
  }
  .params {
    @apply bg-[#ffffff7f];
  }
}
</style>
